<template>
    <div>
        <van-collapse v-model="activeName" accordion>
            <template v-if="switchShow==='business' && collapseList">
                <van-collapse-item v-for="(item,index) in collapseList" :key="index" :name="index" :border="false">
                    <div slot="title" class="collapse_item_title">
                        <h3 class="left">
                            <p>{{item.cycle_status_desc}} <span v-if="item.assessment_res==1">进行中</span></p>
                            <p class="time">{{item.start_time}} 至 {{item.end_time}}</p>
                        </h3>
                        <p class="right">
                            <span v-if="item.assessment_res==2">达标</span>
                            <span class="danger" v-if="item.assessment_res==3">未达标</span>
                        </p>
                    </div>
                    <p class="tips" v-if='["1","2","3","4"].indexOf(item.cycle_status) !=-1'><span>❉</span> 以下两个条件完成其一，则可达标</p>
                    <p class="tips" v-if='["5","6","7","8","9"].indexOf(item.cycle_status) !=-1'><span>❉</span> 完成条件，则可达标</p>
                    <p class="success_conditions">业绩开{{item.assessment_order_target_num}}单<span><van-icon v-if="item.assessment_order_target_num<=item.assessment_order_num" name="success" /></span></p>
                    <p class="success_conditions" v-if='["1","2","3","4"].indexOf(item.cycle_status) !=-1'>指标考核<span>{{item.assessment_total_score}}分<van-icon v-if="item.assessment_total_target_score<=item.assessment_total_score" name="success" /></span></p>
                    <ul class="check_list_content" v-if='["1","2","3","4"].indexOf(item.cycle_status) !=-1'>
                        <li>
                            <p class="check_list_decs"><span class="index_tag">1</span>真实注册数(人)</p>
                            <div class="check_list_progress">
                                <span>目标值：{{item.reg_user.target}} </span>
                                <van-progress :percentage="item.reg_user.percentage" color="#02ccbd" :show-pivot="false" />
                                <!-- <van-progress v-else-if="item.reg_user.real_target>=item.reg_user.target" :percentage="100" color="#02ccbd" :show-pivot="false" />
                                <van-progress v-else :percentage="(item.reg_user.real_target/item.reg_user.target).toFixed(1)*100" color="#02ccbd" :show-pivot="false" /> -->
                                <span class="scores">{{item.reg_user.real_score}}分</span>
                            </div>
                        </li>
                        <li>
                            <p class="check_list_decs"><span class="index_tag">2</span>打开 app 次数(次)</p>
                            <div class="check_list_progress">
                                <span>目标值：{{item.app_open_time.target}} </span>
                                <van-progress :percentage="item.app_open_time.percentage" color="#02ccbd" :show-pivot="false" />
                                <!-- <van-progress v-else-if="item.app_open_time.real_target>=item.app_open_time.target" :percentage="100" color="#02ccbd" :show-pivot="false" />
                                <van-progress v-else :percentage="(item.app_open_time.real_target/item.app_open_time.target).toFixed(1)*100" color="#02ccbd" :show-pivot="false" /> -->
                                <span class="scores">{{item.app_open_time.real_score}}分</span>
                            </div>
                        </li>
                        <li>
                            <p class="check_list_decs"><span class="index_tag">3</span><span>通盟文章分享次数(次)</span></p>
                            <div class="check_list_progress">
                                <span>目标值：{{item.tm_article_share.target}} </span>
                                <van-progress  :percentage="item.tm_article_share.percentage" color="#02ccbd" :show-pivot="false" />
                            <!--  <van-progress v-else-if="item.tm_article_share.real_target>=item.tm_article_share.target" :percentage="100" color="#02ccbd" :show-pivot="false" />
                                <van-progress v-else :percentage="(item.tm_article_share.real_target/item.tm_article_share.target).toFixed(1)*100" color="#02ccbd" :show-pivot="false" /> -->
                                <span class="scores">{{item.tm_article_share.real_score}}分</span>
                            </div>
                        </li>
                        <li>
                            <p class="check_list_decs"><span class="index_tag">4</span>5号分润收益(元)</p>
                            <div class="check_list_progress">
                                <span>目标值：{{item.five_day_money.target}} </span>
                                <van-progress :percentage="item.five_day_money.percentage" color="#02ccbd" :show-pivot="false" />
                                <!-- <van-progress v-else-if="item.five_day_money.real_target==item.five_day_money.target" :percentage="100" color="#02ccbd" :show-pivot="false" />
                                <van-progress v-else :percentage="(item.five_day_money.real_target/item.five_day_money.target)*100" color="#02ccbd" :show-pivot="false" /> -->
                                <span class="scores">{{item.five_day_money.real_score}}分</span>
                            </div>
                        </li>
                    </ul>
                </van-collapse-item>
            </template>
            <template v-if="switchShow==='sevenDelay' && collapseList">
                <van-collapse-item v-for="(item,index) in collapseList" :key="index" :name="index" :border="false">
                <div slot="title" class="collapse_item_title">
                    <h3 class="left">
                        <p>
                            <em>{{item.cycle_name}}</em>
                            <strong class="is-running" v-if="item.appraisal_status==2">进行中</strong> 
                            <strong class="is-running check_status_desc" v-if="item.appraisal_status!=2&&item.check_status_desc!='达标而作废'&&item.check_status_desc!=''">{{item.check_status_desc}}</strong>
                        </p>
                        <p class="time">{{item.begin_date}} 至 {{item.end_date}}</p>
                    </h3>
                    <p class="right">
                        <span v-if="item.pass==1">达标</span>
                        <span class="danger" v-if="item.pass==0">未达标</span>
                    </p>
                    <strong class="fonts" :class="{dangerColor:item.pass==0}">{{item.score}}分</strong>
                </div>
                <ul class="check_list_content">
                    <li v-for="(target,index) in item.targets" :key="index">
                        <p class="check_list_decs"><span class="index_tag">{{index+1}}</span>{{target.name}}</p>
                        <div class="check_list_progress">
                            <p class="success_scores">
                                <span>目标值{{target.target_value}} </span>
                                <em>完成量{{target.target_data}}</em>
                            </p>
                            <template v-if="Number(target.target_value)==0 || Number(target.target_data)==0">
                                <van-progress :percentage="0" color="#02ccbd" :show-pivot="false" />
                            </template>
                            <!-- <template v-else-if="(Number(target.target_data)/Number(target.target_value)*100)>=100">
                                <van-progress :percentage="100" color="#02ccbd" :show-pivot="false" />
                            </template> -->
                            <template v-else>
                                <van-progress :percentage="(Number(target.target_data)/Number(target.target_value)*100)>=100?100:(Number(target.target_data)/Number(target.target_value)*100)" color="#02ccbd" :show-pivot="false" />
                            </template>
                            <span class="scores" :class="{dangerColor:target.pass==0}">{{target.target_score}}分</span>
                        </div>
                    </li>
                </ul>
                </van-collapse-item>
            </template>
        </van-collapse>
    </div>
</template>
<script>
export default {
    name:'ListCollapse',
    props:{
        switchShow:{
            type:String,
            default:'business'
        },
        collapseList:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        return{
            activeName:0,
            isCollapseItem:0,
            isArrow:true,
        }
    },
    methods:{
        toggleCollapseItem(index){
            this.isCollapseItem = index;
            this.isArrow = !this.isArrow;
        }
    }
}
</script>
<style lang="less" scoped>
.van-collapse-item{
    margin-top: 10px;
    border: none;
    /deep/ .van-cell{
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: 1px solid #f7f7f7;
    }
    
}
.van-collapse-item:last-child{border: none;}
.collapse_item_title{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 1px solid #f7f7f7;
    padding-right: 10px;
    .left{
        color: #151617;
        font-size: 15px;
        font-weight: bold;
        p{line-height: 40px;}
        span{
            background: #feb022;
            color: #fff;
            font-size: 12px;
            margin-left: 5px;
            padding: 2px 5px;
            border-radius: 30px;
            box-sizing: border-box;
            font-weight: normal;
        }
        .time{
            color: #999;
            font-size: 13px;
            font-weight: normal;
            line-height: 26px;
        }
    }
    .right{
        span{
            display: inline-block;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            border: 2px solid #9aebe5;
            border-radius: 4px;
            font-size: 15px;
            color: #02ccbd;
            transform: rotate(-15deg);
        }
        .danger{color:#ff4066;border-color: #ff4066;opacity: .4;}
        .van-icon{font-size: 15px;margin-left: 10px;color: #999;}
    }
    .is-running{
        font-size: 12px;
        padding: 2px 5px;
        border-radius: 20px;
        color: #fff;
        background: #ffbb00;
        margin-left: 10px;
    }
    .check_status_desc{background: #02ccbd;}
    .fonts{font-size: 20px;font-weight: 600;}
}
.tips{
    width: 100%;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    color: #151617;
    border-bottom: 1px solid #f7f7f7;
    span{color: #02ccbd;}
}
.success_conditions{
    font-size: 15px;
    color: #151617;
    line-height: 58px;
    border-bottom: 1px solid #f7f7f7;
    span{
        float: right;
        color: #02ccbd;
        font-size: 18px;
        .van-icon-success{margin-left: 5px;font-size: 20px;}
    }
    .danger{color:#ff4066;}
}
.check_list_content{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    li{
        width: 100%;
        height: 60px;
        color: #666;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .check_list_decs{
            flex: 4;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            .index_tag{
                float: left;
                display: block;
                color: #fff;
                background: #ffbb00;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border-radius: 20px;
                margin-right: 5px;
            }
        }
        .check_list_progress{
            text-align: right;
            flex: 3;
            font-size: 12px;
            color: #7d7d7d;
            .van-progress{margin: 5px 0;overflow: hidden;}
            .scores{color: #02ccbd;}
            .success_scores{
                display: flex;
                justify-content: flex-end;
                align-items: center;
                em{margin-left: 20px;}
            }
        }
    }
    li:last-child{border-bottom: none;}
}
.dangerColor{color:#ff4066 !important;}
</style>